<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vuex模块化开发</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vuex.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <button @click="findAll">修改A数据</button>
      <button @click="query">修改B数据</button>
    </div>
    模块A的state:{{aData}} <br>
    模块B的state:{{bData}} <br>
  </div>

  <script>
    // 1.声明模块化的状态
    let moduleA = {
      namespaced: true,  // 通过名称访问moduleA模块
      state() {
        return {
          aData: 'moduleA'
        }
      },
      getters: {

      },
      mutations: {
        SET_ADATA(state, payload) {
          state.aData = payload
        }
      },
      actions: {
        findAll({ commit }) {
          // 提交突变
          commit('SET_ADATA', '123456')
        }
      }
    }
    let moduleB = {
      namespaced: true,
      state() {
        return {
          bData: 'moduleB'
        }
      },
      getters: {

      },
      mutations: {
        SET_BDATA(state, payload) {
          state.bData = payload
        }
      },
      actions: {
        query({ commit }) {
          commit('SET_BDATA', '修改moduleB')
        }
      }
    }
    // 2.实例化状态机
    let store = new Vuex.Store({
      modules: {
        // 重命名vuex模块
        a: moduleA,
        b: moduleB
      }
    })
    // 解构辅助函数
    let { mapState, mapGetters, mapMutations, mapActions } = Vuex

    let vm = new Vue({
      el: '#app',
      data: {

      },
      computed: {
        ...mapState('a', ['aData']),
        ...mapState('b', ['bData']),
      },
      methods: {
        ...mapActions('a', ['findAll']),
        ...mapActions('b', ['query'])
      },
      cerated() {

      },
      store
    })
  </script>
</body>

</html>